<template>


  <el-dialog v-model="show">
    <div class="text-center text-xxl text-bold">
      配置列名
    </div>
    <avue-crud ref="table" :option="option" :data="data" @row-update="rowUpdate"

    ></avue-crud>
  </el-dialog>
</template>

<script>
import pinia from "@/store/store";
import {useMainPageStore} from "@/store/mainPageStore";
import {useColumnDefinedPageStore} from "@/store/columnDefinedPageStore";

const mainPageStore = useMainPageStore(pinia)
const columnDefinedPageStore = useColumnDefinedPageStore(pinia)
export default {
  name: "ColumnDefinedView",
  model: {
    prop: 'show',
    event: 'change'
  },

  props: {},
  data() {
    return {
      show: false,
      option: {
        column: [
          {
            label: '列名',
            prop: 'name'
          },
          {
            label: '变量',
            prop: 'variable',
            type: "select",
            dicData: [
              {
                label: '学号',
                value: 'studentId',
              },
              {
                label: '学生姓名',
                value: 'studentName',
              },
              {
                label: '教师姓名',
                value: 'teacherName',
              },
              {
                label: '课程编码',
                value: 'courseName',
              },
            ],
          },
          {
            label: '类型',
            prop: 'type',
            type: "select",
            dicData: [{
              label: '文本',
              value: 'text',
            },
              {
                label: '字典',
                value: 'select',
              }],
          },
          {
            label: '字典',
            prop: 'dicData',
            display: false
          },
        ]
      }
    }
  },
  computed: {

    data() {


      let rows = columnDefinedPageStore.data || []
      let column = mainPageStore.column;
      return column.map(item => {
        let rowItem = rows.find(sitem => sitem.name === item.label)
        return {
          name: item.label,
          ...rowItem
        }
      })


    }
  },
  methods: {
    rowUpdate(row, index, done) {
      console.log(row)
      this.data[index] = row;
      console.log(index)
      // console.log(this.data)
      columnDefinedPageStore.setData(this.data)

      // this.$refs.table.updateDic()
      done()
    }
  }

}
</script>

<style scoped>

</style>